<!DOCTYPE html>
<html>
<head>
    <title>Pie</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Pie.js"></script>
</head>
<body>
<canvas id="canvas1" height="450" width="450"></canvas>
<canvas id="canvas2" height="450" width="450" style="margin-top: 10px;"></canvas>
<canvas id="canvas3" height="200" width="450" ></canvas>
<script type="text/javascript">
    var pieData = [
        {
            name : 'A',
            value: 5,
            color:"#F38630"
        },
        {
            name : 'B',
            value : 50,
            color : "#E0E4CC"
        },
        {
            name : 'C',
            value : 100,
            color : "#69D2E7"
        }
    ];
    var p1 = new JChart.Pie(pieData,{
        id : 'canvas1'
    });
    p1.on('tap.pie',function(i,data){
        console.log('点击了第'+i+'个扇形');
        return true;
    })
    p1.on('renderText',function(percent,data,i){
        if(i == 0){
            this.ctx.set('fillStyle','#fff');
        }
        return data.value;
    })
    p1.on('animationComplete',function(){
        console.log('动画执行完毕');
    })
    p1.on('rotate',function(i,data){
		console.log('第'+i+'个扇形已经旋转到6点钟方向');
		//p.pullOut(i);
	});
	p1.on('pushIn',function(i,data){
		console.log('所有弹出扇形已经被收回');
	});
	p1.on('pullOut',function(i,data){
		console.log('第'+i+'个扇形已经弹出');
	});
    p1.draw();

    var p2 = new JChart.Pie(pieData,{
        id : 'canvas2',
        isDount : true,
        clickType : 'rotate',
        dountText : 'CPU'
    });
    p2.on('click',function(i,data){
        p2.setDountText(data.value);
        return true;
    });
    p2.draw();
    var p3 = new JChart.Pie(pieData,{
        id : 'canvas3',
        isDount : true,
        clickType : null,
        startAngle : -Math.PI,
        totalAngle : Math.PI,
        dountText : 'CPU'
    }).draw();
</script>
</body>
</html>